<template>
  <Row type="flex" :style="finalOutlineStyle">
    <span :style="finalTitleStyle">
      <span>(</span>
      <field-cell v-if="!onlyRead" :config="config" v-model="data.titlePrefix"></field-cell>
      <span v-else>{{ data }}</span>
      <span>)</span>
      {{ title }}
    </span>
  </Row>
</template>

<script>
export default {
  name: "cfg-title-prefix",
  props: {
    onlyRead: {
      default: () => {
        return false;
      },
    },
    title: {
      default: () => {
        return "";
      },
    },
    titleStyle: {
      default: () => {
        return {};
      },
    },
    outlineStyle: {
      default: () => {},
    },
    config: {
      default: () => {
        return {
          type: "text",
        };
      },
    },
    data: {
      default: () => {
        return {};
      },
    },
  },
  computed: {
    finalTitleStyle() {
      return {
        ...{
          fontSize: "36px",
          fontWeight: "bold",
          display: "flex"
        },
        ...this.titleStyle,
      };
    },
    finalOutlineStyle() {
      return {
        ...{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          padding: "5px",
          borderBottom: "1px solid black",
          margin: "2px 0",
        },
        ...this.outlineStyle,
      };
    },
  },
};
</script>

<style scoped></style>
